<!-- 加载ckplayer视频插件 -->
<link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css">
<link rel="stylesheet" href="/assets/home/css/details.css">
<script src="/assets/home/plugin/ckplayer/js/ckplayer.min.js"></script>

<!-- 下拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<!-- 引入http请求插件 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>

<!-- wowjs  懒加载-->
<link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css" />
<script src="/assets/home/plugin/wowjs/wow.min.js"></script>


<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <div class="nav">
        <ul id="tab">
            <li class="active" data-type="course">课程</li>
            <li data-type="info">详情</li>
            <li data-type="comment">评论</li>
        </ul>
    </div>
</header>

<div id="tab-content">

    <!-- 课程 -->
    <div id="course" class="active">
        <div id="cover">
            <!-- 课程封面 -->
            <img class="cover_bg" src="{$subject.thumbs_text}">
            <!-- 中间播放键 -->
            <div id="play">
                <img src="/assets/home/images/play.png" />
            </div>
        </div>

        <!-- ckplayer视频容器元素 -->
        <div id="video"></div>

        <!-- 课程信息 -->
        <div class="head ">
            <div class="info wow">
                <!-- 课程标题 -->
                <h4 class="name">{$subject.title}</h4>
                <!-- 在下面绑定事件，用action -->
                <div class="action">
                    {if condition="$subject.likes_active"}
                    <!-- 点赞 -->
                    <img class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
                    {else /}
                    <!-- 未点赞 -->
                    <img class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                    {/if}

                    <span class="num">666</span>
                </div>
            </div>
            <ul>
                <li>
                    <!-- 三元运算符来获取。在控制器Subject.php中的语句为$subject = $this->SubjectModel->with(['category'])->find($subid);获取，
                     其中关联了模型Subject.php中cate方法来查询 -->
                    <span>课程分类：</span>{$subject.category.name ? $subject.category.name : '暂无分类'}
                </li>
                <li>
                    <span>课程价格：</span>
                    <span class="price">￥{$subject.price}</span>
                </li>
                <li>
                    <span>章节总数：</span>{$chapter|count}
                </li>
                <li>
                    <span>发布时间：</span>{$subject.createtime_text}
                </li>
            </ul>
        </div>

        <!-- 授课老师 -->
        <!-- 因为授课老师不一定有，所以先来个if判断 -->
        {if condition="$teacher"}
        <div class="teacher">
            <div class="title">授课老师</div>
            <div class="info">
                <div class="left">
                    <div class="avatar">
                        <a href="{:url('home/teacher/info', ['teacherid' => $teacher['id']])}">
                            <img src="{$teacher.avatar_text}" alt="">
                        </a>
                    </div>
                </div>
                <div class="right">
                    <div class="name">
                        <a href="{:url('home/teacher/info', ['teacherid' => $teacher['id']])}">{$teacher.name}</a>
                    </div>
                    <div class="job">{$teacher.job}</div>
                    <div class="content">{$teacher.content ? $teacher.content : '这个人很懒，什么没有写！~'}</div>
                </div>
            </div>
        </div>
        {/if}


        <!-- 课程章节 -->
        <div class="chapter">
            <div class="title">课程章节</div>
            <!-- 拿默认的第一个的章节Id，在下面那里绑定了这个方法 -->
            <ul>
                {if condition="$chapter"}
                {foreach $chapter as $key=>$item}
                <!-- 在下面点击事件触发后，要知道哪里传id过去，把这里的$item.id赋值给给data-cid，
                 再把data-cid传到piay()方法，这个方法在下面js这里，function play(that) -->
                <li data-cid="{$item.id}" onclick="play(this)">{$key + 1}.{$item.title}</li>
                {/foreach}
                {else /}
                <li>暂无课程章节</li>
                {/if}
            </ul>
        </div>

        <!-- 购买 -->
        <div class="footer">
            <div class="footer-box">
                <div class="collection">
                    <img src="/assets/home/images/rate.png" alt="">
                    收藏
                </div>

                {if condition="$buy"}
                <a class="btn disabled">已购买课程</a>
                {else /}
                <a href="{:url('home/subject/confirm', ['subid' => $subject['id']])}" class="btn">购买</a>
                {/if}

            </div>
        </div>
    </div>

    <!-- 详情 -->
    <div id="info">
        <div class="mui-table-view content">{$subject.content}</div>
    </div>

    <!-- 评论 -->
    <div id="comment">
        <!-- 搜索框 -->
        <!-- wow bounceIn使搜索框刷新后出现效果变为由小变大 -->
        <div class="search mui-input-row mui-search wow bounceIn">
            <!-- 样式class="mui-input-clear"是表示为，搜索框右边有个清除搜索框内的内容 -->
            <input type="search" placeholder="请输入课程名称" name="search" />
        </div>

        <!-- 评论内容 。滚动的内容给个id，在滚动那里写上 id=list ,就可以把这里这些内容滚动-->
        <div id="list">
            <ul class="mui-table-view list"></ul>
        </div>

    </div>
</div>




<script>




    // 章节的id
    var cid = 0

    var player = null;

    //一进入到界面中，默认要拿到第一个的章节ID
    // 给页面绑定加载事件
    $(document).ready(function () {
        // 默认在第一章节，给第一个li元素添加'active'类
        $(".chapter li:first").addClass('active')
        // 获取第一个li元素的data-cid属性值
        cid = $(".chapter li:first").data('cid')
        cid = cid ? cid : 0;
    })


    // 播放课程详情页的章节
    $('#tab li').click(function () {
        let type = $(this).data('type');
        $(this).addClass('active').siblings().removeClass('active');
        $('#tab-content #' + type).addClass('active').siblings().removeClass('active');
    })


    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击章节,点击其他按钮时
    function play(that) {


        $("#video").css('display', 'none')
        $("#cover").css('display', 'block')

        //暂停播放
        if (player) player.pause()

        // 获取章节id。在上面html的章节那里点击，那里写了id,在哪一章点击后，就把哪一章的id传过来，进行播放
        cid = that.dataset.cid ? that.dataset.cid : 0
        // console.log(cid)

        // siblings() 方法会获取当前元素的所有同级元素，即它的所有兄弟元素，但不包括当前元素本身。 
        $(that).addClass('active').siblings().removeClass('active')


    }


    // 点击播放课程章节。异步,async替换function。给个箭头函数
    $("#play").on('click', async () => {

        // 点击后发送ajax
        var result = await POST({
            url: `{:url('/subject/play')}`,
            params: { cid } //发送的数据为{cid}。因为课程章节表fa_subject_charter那里已经有了课程的subid,所以这里只需要传章节的cid过去就可以
        })



        //如果还没有购买课程，就走到这里 
        if (result.code == 0) {
            // 弹出提示框：请先购买课程
            mui.toast(result.msg)
            return false
        }


        //跳转容器结构
        // 在.css()方法中，'display'是CSS样式属性，用于控制元素的显示方式。
        // display样式属性设置为block，这意味着如果该元素之前是隐藏的，现在会显示出来，并且以块级元素的形式展现。
        $("#video").css('display', 'block')
        // 播放时，id=cover的元素封面图片，样式设置为不显示
        $("#cover").css('display', 'none')

        //进行播放
        var videoObject = {
            container: '#video',
            video: result.data,
            autoplay: true,//是否自动播放
            loop: true,//是否需要循环播放
            ended: true,//结束显示的内容
            webFull: true,//是否启用页面全屏按钮，默认不启用
            theatre: true,//是否启用剧场模式按钮，默认不启用
            controls: true,//是否显示自带控制栏
            rightBar: true,//是否开启右边控制栏
            smallWindows: false,//是否启用小窗口模式
            smallWindowsDrag: true,//小窗口开启时是否可以拖动
            screenshot: true,//截图功能是否开启
            timeScheduleAdjust: 1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
            logo: '',//logo
            menu: true,//右键菜单


        }

        player = new ckplayer(videoObject);






    })

    // 立即购买
    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index = 1) {
                location.href = "/assets/home/buy.html";
            }
        })
    })

    // 做初始化 
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated FadeInDown', //动画名。 animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画，即加载的效果(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       //（重点） 异步加载的内容是否有效(默认为true)

        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
    }).init();

    var keywords = ''; //给个关键词空
    var page = 0; //当前页
    var limit = 5; //每页查询多少条

    // 给上面的搜索框name="rearch",绑定一个change改变事件
    //当关键词这里的事件一触发，就去到下面的DownCallback()方法这里
    $("input[name=search]").change(function () {
        keywords = $(this).val() //$(this).val表示被选中的元素的值，这里search输入框
        DownCallback() //当关键词改变时，触发这里
    })
    /*在这段代码中，$(this).val() 是一个 jQuery 方法，用于获取当前被选中元素的值。

    具体来说，$("input[name=search]") 选择了名称为 "search" 的输入框，当输入框的值发生变化时，会触发该函数。

    在函数内部，$(this).val() 获取当前被选中的输入框的值，并将其赋给一个名称为 "keywords" 的变量。

    因此，val() 方法用于获取当前被选中元素的值，在这里就是获取输入框的值*/

    //配置下拉刷新和上拉加载
    var scroll = new MeScroll('list', { //new一下MeScroll()插件，'list'是上面列表的id值，给到这里
        down: { //配置的下拉选项
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调。 DownCallback这个方法在下面添加了，在这里调用
        },
        up: { //配置的上拉选项，
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10

            // 一进来自动触发上拉的回调函数
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }。UpCallback这个方法在下面添加了，在这里调用
            toTop: { //配置回到顶部按钮
                duration: 200,
                src: "/assets/home/plugin/mescroll/mescroll-totop.png", //返回到顶部的一个图片。默认滚动到1000px显示,可配置offset修改
                offset: 100, //距离底部还剩多少时，触发底部的加载效果
                supportTap: true, //快速响应事件
            }
        }
    })

    // 下拉刷新回调。DownCallback()此方法在这里添加，在上面调用
    function DownCallback() {
        scroll.resetUpScroll() //做一个下拉重置
        $('#list .list').empty() //这里做一个清除。$('#list .list')里面#list是id，list是class,这里表示的是把id=list里面的class=list的元素清空
    }

    // 上拉刷新回调。 UpCallback()此方法在这里添加，在上面调用
    async function UpCallback(current) {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page: page, //分页
            limit: limit, //limit为每页显示多少条
            keywords: keywords //关键词
        };



        var result = await POST({
            // 发送到js就要把$写到{}里面
            url: `/subject/info?subid={$subject.id}`,
            params: data //组转好的数据发送过去的数据
        })


        // if (!result) return false


        // 条件判断，code=0,表示暂无更多数据，就有如下操作
        if (result.code == 0) {

            mui.toast(result.msg, { duration: 1000 })

            // 暂无更多数据
            scroll.endBySize(0, 0) //分页直接设置为0
            return false
        }

        // 从返回来的结果result的列表data中拿到的两个数据list和count
        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态。在拿到list和data数据后进出
        scroll.endBySize(list.length, count)
        // 把数据传到页面渲染的方法这里
        FetchList(list)
    }










    // 追加渲染数据
    function FetchList(list) {

        for (var item of list) {

            // 在数据库里面，有评论就拿，并且转化为整数类型，有绝对值就转化为正整数类型
            var rate = item.rate ? Math.abs(parseInt(item.rate)) : 0;
            // 给个空字符串，为for循环赋值
            var rate_temp = '';

            // 逻辑：当评价3星时，输出的星小于等于3大于0时，为红星；大于等于小于5时为灰色
            for (var i = 1; i <= 5; i++) {


                if (i <= rate) {
                    //红星
                    rate_temp += `<span><img src="/assets/home/images/rate_active.png" alt=""></span>`

                } else {
                    //灰星
                    rate_temp += `<span><img src="/assets/home/images/rate.png" alt=""></span>`
                }
            }


            /*这段代码的作用是在ID为list的元素以及所有类名为list的元素的内部最后位置插入上面渲染的变量temp。
            这里使用了逗号选择器（, ），它会选择所有具有指定类名的元素，并对这些元素应用.append(temp)操作，
            从而在每个元素的末尾添加temp变量的内容。*/
            var temp = `
            <li class="mui-table-view-cell mui-media  wow bounceIn">
                    <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_text}">
                    <div class="mui-media-body">
                        <div class="header">
                            <span class="nickname">${item.business.nickname}</span>
                        </div>
                        <p>${item.content}</p>
                        <div class="rate">${rate_temp}
                        </div>
                    </div>
                </li>

        `


            $('#list .list').append(temp)

        }
    }


    //点赞的绑定事件
    $('.action').click(() => {
        //mui确认对话框
        mui.confirm(
            '是否确认点赞',
            '点赞提醒',
            ['取消', '确认'],

            // 异步请求。这是个异步函数
            async (res) => {
                if (res.index === 1) {

                    //ajax发送请求
                    var result = await POST({
                        url: '/subject/likes',
                        params: { subid: `{$subject.id}` }
                    })

                    // 关闭当前窗口
                    $('.mui-popup-backdrop').remove()
                    $('.mui-popup').remove()

                    //弹框信息
                    mui.toast(result.msg)

                    // 如果result.code=1，请求成功，走进来
                    if (result.code) {
                        var action = result.data.action ? result.data.action : ''

                        //点赞动作
                        if (action == 'active') {
                            //换图片
                            $(".thumbs").prop('src', '/assets/home/images/thumbs-up.png')

                            //修改点赞数量。拿到点赞总数
                            var num = $(".num").text()
                            // 转化为整数类型
                            num = parseInt(num) ? parseInt(num) : 0
                            $(".num").text(num + 1)

                        } else {
                            //换图片
                            $(".thumbs").prop('src', '/assets/home/images/thumbs.png')

                            //修改点赞数量
                            var num = $(".num").text()
                            num = parseInt(num) ? parseInt(num) : 0
                            $(".num").text(num - 1)
                        }
                    }
                }
            }
        )
    })








    // 收藏绑定事件
    $('.collection').click(function () {
        //mui确认对话框
        mui.confirm(
            '是否确认收藏',
            '收藏提醒',
            ['取消', '确认'],
            async (res) => {
                // console.log(11111);
                // return false

                if (res.index === 1) {
                    //ajax发送请求
                    var result = await POST({
                        url: '/subject/collection',
                        params: { subid: `{$subject.id}` }
                    })
                    //弹框信息
                    mui.toast(result.msg)

                    //如果result.code=1，请求成功，走进来 
                    if (result.code) {
                        var action = result.data.action ? result.data.action : ''




                    }


                    // console.log(result.code);
                    // return false



                }

            }


        )
    })

</script>